<template>
  <section class="flex gap-2 flex-wrap">
    <div
      v-for="item in CODE_EDITOR_LIST"
      :key="item.code"
      class="relative p-1 pt-4 pr-4 border w-fit rounded-lg"
      @click="handleView(item)"
    >
      <cl-icon
        icon="View"
        tooltip="查看代码示例"
        class="!absolute right-1 top-1 cursor-pointer"
      ></cl-icon>
      <cl-button :icon="item.icon" :type="item.type">{{ item.text }}</cl-button>
    </div>
  </section>
  <CLDialog @register="register">
    <template #default="{ data }">
      <cl-button :icon="data.icon" :type="data.type">{{ data.text }}</cl-button>
      <cl-code-editor v-model="data.code" class="h-20 mt-4"> </cl-code-editor>
    </template>
  </CLDialog>
</template>
<script lang="ts" setup>
import { type CodeEditorListType, CODE_EDITOR_LIST } from "./code-editor";
import { CLDialog, useDialog } from "@/components/cl-dialog";

const { register, methods } = useDialog({
  title: "代码示例",
});

function handleView(item: CodeEditorListType) {
  methods.value.setSlotData(item);
  methods.value.setVisible(true);
}
</script>
<style lang="scss" scoped></style>
